<template>
	<nav class="tabs">
		<li class="tab" v-for="item in tabsData">
			<!--path路径写法-->
			<!--<router-link :to="item.path">{{item.title}}</router-link>-->
			<!--路由配置了name的写法-->
			<router-link :to="{name:item.pathName}">{{item.title}}</router-link>
		</li>
	</nav>
</template>

<script>
	export default {
		name:"tabs",
		data(){
			return {
				tabsData:[
					{title:"首页",path:"/home",pathName:"home"},
					{title:"发现",path:"/discover",pathName:"discover"},
					{title:"设置",path:"/setting",pathName:"setting"}
				]
			}
		}
	}
</script>

<style>
	.tabs{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 49px;
		display: flex;
		background: #007DDB;
	}
	.tab:before{
		content: "";
		width: 100%;
		height: 1px;
		border-top: 1px solid #0000FF;
		position: absolute;
		left: 0;
		top: -1px;
		transform: scaleY(0.5);
	}
	.tabs .tab{
		flex: 1;
		text-align: center;
		line-height: 49px;
	}
	.tabs .tab a{
		display: block;
		font-size: 18px;
		color: #fff;
	}
	.tabs .tab .router-link-active{
		background: #0000FF;
	}
</style>